<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>送水回桶</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <link rel="shortcut icon" href="image/favicon.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/manager/css/light7.min.css">
    <link rel="stylesheet" href="/manager/css/cxvalidation.css">
    <link rel="stylesheet" href="/manager/css/public.css?v=2018083101">
    <link rel="stylesheet" href="/manager/css/bucket.css?v=2018083101">
    <style>
        .bucket-content input {
            height: 1.5rem;
            text-align: left;
            width: 60%;
            border-radius: 0.2rem;
        }
    </style>
</head>
<body>
<div class="page-group" style="background-color: white;">
    <div class="content-padded">
        <p>注意: 1.回桶数量为'0'时，请任意选择回桶品牌</p>
        <p>2.非'0'时，回桶数量和数量需要对号入座</p>
    </div>
    <form action="" name="myForm" id="myForm" method="post">
        {{csrf_field()}}
        <div class="" style="border-bottom:.3rem solid #EFEFF4;">
            <div class="bucket-content">
                <span>送水师傅：</span>
                <select name="worker_id" id="worker_id" class="gray_bor"  data-validation="required" data-validation-message="请选择送水工">
                    @if(!$info['worker_id'])
                        <option value="">请选择送水工</option>
                    @endif
                    @foreach($workerInfo as $v)
                        <option value="{{$v['id']}}" @if($info['worker_id'] == $v['id']) selected @endif>{{$v['name']}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div id="bucket_div">
            @if($back)
                <div class="bucket-box" style="border-bottom:.3rem solid #EFEFF4;">
                    <div class="bucket-content">
                        <span>回桶品牌：</span>
                        <select name="bucket_category_ids[]" class="gray_bor" id="bucket_category_id_value"
                                placeholder="请选择水桶品牌"
                                data-validation="required" data-validation-message='{"required":"请选择水桶品牌"}'>
                            @foreach($bucketData as $v)
                                <option value="{{$v['bucket_category_id']}}">{{$v['title']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="bucket-content" >
                        <span>水桶数量：</span>
                        <input class="gray_bor" type="text" name="nums[]" id="nums" value=""  data-validation="required,integer,min[0],condRequired[bucket_category_id_value]"
                               data-validation-message='{"required":"请填写水桶数量",
                               "integer":"水桶数量必须是数字","min":"水桶数量不能小于0","condRequired":"请填写水桶数量"}' />
                    </div>
                </div>
        </div>
        <img class="add_img" src="/manager/image/add.png">
        @endif
        <div class="to_bottom">
            <input type="hidden" name="back" value="{{$back}}">
            <input type="hidden" name="id" value="{{$info['id']}}">
            <input type="hidden" name="sid" value="{{$info['shop_id']}}">
            <input type="hidden" name="aid" value="{{$info['admin_id']}}">
            <input type="hidden" name="oldwid" value="{{$info['worker_id']}}">
            <input type="hidden" name="recive_order_money" value="{{!$info['type'] ? 0 :  $info['order_amount']}}">
            <input type="hidden" name="recive_bill_money" value="{{$recive_bill_money}}">
            <div class="p-button"><button  class="button button-fill" type="submit" style="width: 100%;"> @if($back) 确认取桶 @else 完成 @endif</button></div>
        </div>
    </form>
</div>
</div>
<script src="/manager/js/jquery-3.2.1.min.js"></script>
<script src="/manager/js/light7.js"></script>
<script src="/manager/js/cxvalidation.js"></script>
<script src="/manager/js/commen.js?v=2018083101"></script>
<script>
    $(".add_img").click(function () {
        var index = $(".bucket-box").length;
        if (index >= 3) {
            return;
        }
        var brand_rule = 'condRequired[nums'+index+']';
        var brand_rule_msg = '{"condRequired":"请选择水桶品牌"}';
        var num_rule = 'integer,min[0],condRequired[bucket_category_id_value'+index+']';
        var num_rule_msg = '{"integer":"水桶数量必须是数字","min":"水桶数量不能小于0","condRequired":"请填写水桶数量"}';
        var str = '<div class="bucket-box" style="border-bottom:.3rem solid #EFEFF4;">'+
                '<div class="bucket-content">'+
                '<span>回桶品牌：</span> '+
        '<select name="bucket_category_ids[]" class="gray_bor" id="bucket_category_id_value'+index+'"'+
       ' placeholder="请选择水桶品牌"'+
        'data-validation="'+brand_rule+'" data-validation-message='+brand_rule_msg+'>'+
                @foreach($bucketData as $v)
                '<option value="{{$v['bucket_category_id']}}">{{$v['title']}}</option>'+
                @endforeach
                '</select>'+
                '</div>'+
                '<div class="bucket-content" >'+
                '<span>水桶数量：</span> '+
        '<input class="gray_bor" type="text" name="nums[]" id="nums'+index+'" value=""  data-validation="'+num_rule+'"'+
        'data-validation-message='+num_rule_msg+' />'+

    '</div>'+
                '<div id="del'+index+'" class="del_text del" data-id="'+index+'">删除</div>'+
    '</div>';

//        var clone = $(".bucket-box:nth-of-type(1)").clone(true);
//        var str = clone.append('<div class="del_text del" data-id="'+num+'">删除</div>');
        $("#bucket_div").append(str);
        $(".del").bind("click",function(){
            $(this).parent().remove();
            $.toast('删除成功');

        });
    });

    function numValue() {
        var html = '';
        var title = '';
        var num = 0;
        $(".bucket-box").each(function(i,n){
             title = $(n).find('select > option:selected').text();
             num = $(n).find('input').val();
            if(!isEmpty(num)){
                html +='<p>'+title + ' '+ num + ' '+'个'+'</p>';
            }
        });
        return html;
    }

    //验证表单并处理登录交互
    var ajaxOption = {
        url: "{{urlPlat('single','postOrderComplete')}}",
        method: 'POST',
        confirm:parseInt({{$back}})>0 ? true : false,
        confirm_title:'回桶数据确认',
        confirm_content:['numValue'],//用[]包起来表示该值是函数，不包则为字符串
        data:{},
        success: function (res) {
            setTimeout(function () {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.$('#row_{{$info['id']}}').hide();
                parent.layer.close(index);
            },2000);
        }
    };

    checkform($('#myForm'), ajaxOption);
</script>
</body>
</html>